<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery-webcam-master</title>
<link href="cs.css" rel="stylesheet" type="text/css">
<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.webcam.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery("#webcam").webcam({
    width: 320,
    height: 240,
    mode: "callback",
    swffile: "jscam_canvas_only.swf", // canvas only doesn't implement a jpeg encoder, so the file is much smaller
    onTick: function(remain) {
        if (0 == remain) {
            jQuery("#status").text("Cheese!");
        } else {
            jQuery("#status").text(remain + " seconds remaining...");
        }
    },
    onSave: function(data) {
        var pos = 0, ctx = null, saveCB,w = 320,h= 240, image = [];  
        var canvas = document.createElement("canvas");//创建画布指定宽度和高度  
        canvas.setAttribute('width', 320);  
        canvas.setAttribute('height', 240);  
        ctx = canvas.getContext("2d");//设置画布为2d，未来可能支持3d  
        image = ctx.getImageData(0, 0, 320, 240);//截图320*240，即整个画布作为有效区(cutx?)
      
        var col = data.split(";");
        var img = image;  
        //绘制图像(这里不是很理解算法)  
        //参数data  只是每行的数据  ，例如320*240 大小的照片，一张完整的照片下来需要240个data，每个data有320个rgb  
        for(var i = 0; i < w; i++) {  
            //转换为十进制  
            var tmp = parseInt(col[i]);  
            img.data[pos + 0] = (tmp >> 16) & 0xff;  
            img.data[pos + 1] = (tmp >> 8) & 0xff;  
            img.data[pos + 2] = tmp & 0xff;  
            img.data[pos + 3] = 0xff;  
            pos+= 4;  
        }  

        //当绘制320*240像素的图片时发给后端php  


        //把图像放到画布上,输出为png格式  
        ctx.putImageData(img, 0, 0);  
        $.post("http://hp.jkshequ.cn/test/getpic.php", {val: "data",w:w,h:h,image: canvas.toDataURL("image/png")},function(data){  
              var imgStr = "";  
              $("#picView").html(data);//显示拍摄的照片  
              $("#getPic").off('click');//禁用拍照功能  
              $("#getPic").addClass('layui-btn-disabled');  
        });  
        pos = 0;  
    
    },
    onCapture: function () {
        webcam.save();
    },
    debug: function (type, string) { },
    onLoad: function () {
    // Page load
        var cams = webcam.getCameraList();
        for(var i in cams) {
            jQuery("#cams").append("<li>" + cams[i] + "</li>");
        }
    }
});
});
</script>
</head>
<body>
<div id="webcam"></div>
<input type="button" value="Capture" onclick="webcam.capture()" />
<div id="picView" style="width:296px;height:240px;margin-left:73px;">
</body>
</html>